<template>
  <BasicTable @register="registerTable" @selection-change="handleSelectionChange">
    <template #toolbar>
      <a-button type="primary" @click="handleCreate">添加用户</a-button>
      <a-dropdown :disabled="selectedRows.length === 0">
        <template #overlay>
          <a-menu>
            <a-menu-item key="1" @click="handleBatchDelete">
              <a-icon type="delete" />
              删除
            </a-menu-item>
            <a-menu-item key="2" @click="handleBatchChangeUserStatus(false)">
              <a-icon type="lock" />
              禁用
            </a-menu-item>
            <a-menu-item key="3" @click="handleBatchChangeUserStatus(true)">
              <a-icon type="unlock" />
              启用
            </a-menu-item>
          </a-menu>
        </template>
        <a-button style="margin-left: 8px">
          批量操作
          <a-icon type="down" />
        </a-button>
      </a-dropdown>
    </template>
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'headPic'">
        <a-avatar shape="square" :src="record.headPic" />
      </template>
      <template v-if="column.dataIndex === 'gender'">
        {{ record.gender === 1 ? '男性' : '女性' }}
      </template>
      <template v-if="column.dataIndex === 'enableStatus'">
        {{ record.enableStatus === 1 ? '启用' : '禁用' }}
      </template>
    </template>
    <template #action="{ record }">
      <TableAction
        :actions="[
          {
            label: '编辑',
            icon: 'ant-design:edit-outlined',
            onClick: handleEdit.bind(null, record),
          },
          {
            label: '详情',
            icon: 'ant-design:file-outlined',
            onClick: handleView.bind(null, record),
          },
          {
            label: '重置密码',
            icon: 'ant-design:file-outlined',
            onClick: handleResetPassword.bind(null, record),
          },
          {
            label: '删除',
            icon: 'ic:outline-delete-outline',
            onClick: handleDelete.bind(null, record),
          },
        ]"
      />
    </template>
  </BasicTable>
  <UserModal @register="registerModal" @success="reload" />
  <PasswordModal @register="registerPasswordModal" @success="reload" />
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicTable, useTable, BasicColumn, TableAction } from '/@/components/Table';
  import { message, Modal } from 'ant-design-vue';
  import { getUserList, deleteUserByUserIds, updateUserEnableStatus } from '/@/api/sys/user';
  import { searchFormSchema, userColumns } from './user.data';
  import UserModal from './components/UserModal.vue';
  import PasswordModal from './components/PasswordModal.vue';
  import { useModal } from '/@/components/Modal';
  import dayjs from 'dayjs';
  import { cloneDeep } from 'lodash-es';

  const selectedRows = ref<Recordable[]>([]);

  const [registerTable, { reload, updateTableDataRecord }] = useTable({
    title: '用户列表',
    api: getUserList,
    rowKey: 'id',
    columns: userColumns,
    showIndexColumn: true,
    rowSelection: {
      type: 'checkbox',
    },
    tableSetting: {
      cacheKey: 'user_list',
    },
    formConfig: {
      labelWidth: 100,
      schemas: searchFormSchema,
      autoSubmitOnEnter: true,
    },
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    beforeFetch({ pageIndex, pageSize, username, name, gender, enableStatus }) {
      return {
        pageIndex,
        pageSize,
        model: {
          username: username ?? '',
          name: name ?? '',
          gender: gender ?? '0',
          enableStatus: enableStatus ?? '0',
        },
      };
    },
    actionColumn: {
      width: 300,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  });

  const [registerModal, { openModal }] = useModal();

  const [registerPasswordModal, { openModal: openPasswordModal }] = useModal();

  const handleCreate = () => {
    openModal(true, {
      type: 'create',
    });
  };

  const handleSelectionChange = ({ rows }) => {
    selectedRows.value = rows;
  };

  const handleBatchChangeUserStatus = (status: boolean) => {
    Modal.confirm({
      title: '确认操作',
      content: `确定要${status ? '启用' : '禁用'}选中用户?`,
      onOk: async () => {
        await updateUserEnableStatus({
          userIds: selectedRows.value.map((item) => item.id),
          enableStatus: status ? 1 : 2,
        });
        message.success('操作成功！');
        reload();
      },
    });
  };

  const handleEdit = (record: Recordable) => {
    openModal(true, {
      record,
      type: 'edit',
    });
  };

  const handleView = (record: Recordable) => {
    openModal(true, {
      record,
      type: 'detail',
    });
  };

  const handleResetPassword = (record: Recordable) => {
    openPasswordModal(true, {
      record,
    });
  };

  const handleDelete = (record: Recordable) => {
    Modal.confirm({
      title: '确认删除',
      content: '确定要删除系统用户信息吗?',
      onOk: async () => {
        await deleteUserByUserIds([record.id]);
        message.success('删除系统用户信息成功');
        reload();
      },
    });
  };

  const handleBatchDelete = () => {
    Modal.confirm({
      title: '确认删除',
      content: '确定要删除选中数据吗?',
      onOk: async () => {
        await deleteUserByUserIds(selectedRows.value.map((item) => item.id));
        message.success('删除系统用户信息成功');
        reload();
      },
    });
  };
</script>
<style scoped></style>
